import React from 'react';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { Form } from 'antd';

import { GuideDetail, GuideHRContent } from '../containers';
import { TRIAL_ACTION } from '../constants';

const { Panel } = Collapse;
function GuideHR({ data = {} }) {
    const { activeKey, onChange } = useCollapse(['1', '2'], []);

    const detail = React.useMemo(() => {
        const { guide = [] } = data;
        return guide.find(item => item.status === TRIAL_ACTION.GUIDE_HR);
    }, []);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <Panel header="引导内容" key="1">
                    <GuideHRContent />
                </Panel>
                <Panel header="引导记录" key="2">
                    <GuideDetail data={detail} />
                </Panel>
            </Collapse>
        </div>
    );
}

export default Form.create({})(GuideHR);
